<template>
    <div class="concent">
        <el-form label-width="100px">
            <el-form-item label="通用标题：">
                <el-input maxlength="10" v-model="list.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="标题颜色：">
                <el-color-picker v-model="list.titlecolor" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item label="背景颜色：">
                <el-color-picker v-model="list.bgcolor" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item label="是否加粗：">
                <el-radio v-model="list.radio" label="1">是</el-radio>
                <el-radio v-model="list.radio" label="2">否</el-radio>
            </el-form-item>
            <el-form-item label="标题位置：">
                <el-radio v-model="list.place" label="1">左边</el-radio>
                <el-radio v-model="list.place" label="2">中间</el-radio>
                <el-radio v-model="list.place" label="3">右边</el-radio>
            </el-form-item>
            <el-form-item label="高度：">
                <el-input placeholder="请输入高度" v-model="list.height"
                    onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" clearable>
                    <template slot="append">px</template>
                </el-input>
            </el-form-item>
            <el-form-item label="链接：">
                <el-tooltip effect="dark" :content="list.linkName" placement="top" v-if="list.link">
                    <span class="text" @click="urlPopup(index)">{{
                        list.linkName
                    }}</span>
                </el-tooltip>
                <span v-else @click="urlPopup(index)" class="link">请输入跳转链接</span>
            </el-form-item>
        </el-form>

        <div class="image-content">
            <p class="desc">添加图片 (最多{{ len }}张，可拖动排序）</p>
            <vuedraggable v-model="list.data" tag="ul" draggable="li" v-if="list.data && list.data.length > 0"
                class="image-list">
                <li v-for="(item, index) in list.data" :key="index">
                    <div class="l-info">
                        <p>
                            <span class="sort">排序{{ index + 1 }}</span>
                        </p>
                        <p>
                            <span>名称：</span>
                            <span class="text">{{ item && item.name }}</span>
                        </p>
                    </div>
                    <div class="r-image">
                        <span @click="removeImage(index)" class="el-icon-close"></span>
                        <div class="image-box">
                            <img :src="item && item.url" />
                            <span @click="setImage(index)" class="el-icon-edit-outline"></span>
                        </div>
                    </div>
                </li>
            </vuedraggable>
            <template v-if="list.data && list.data.length < len">
                <el-button type="primary" icon="el-icon-plus" @click="addImage(null)" class="add-image">
                    添加背景图片
                </el-button>
                <p class="size">（建议尺寸：{{ size }}）</p>
            </template>
            <el-upload ref="upload" :http-request="upload" :show-file-list="false" multiple action
                style="display: none">
            </el-upload>
        </div>

        <el-dialog title="请选择跳转链接" :visible.sync="show" @close="close" :destroy-on-close="true">
            <RoutLink :link="list.link" @selpage="selpage"></RoutLink>
        </el-dialog>
    </div>
</template>

<script>
import vuedraggable from "vuedraggable";
import RoutLink from "@/components/RoutLink/RoutLink.vue"

export default {
    name: "propagate",
    components: {
        vuedraggable,
        RoutLink
    },
    props: {
        data: {
            type: Object,
            default: () => { },
        },
    },
    computed: {
        size() {
            return "750*100";
        },
        len() {
            return 1
        },
    },
    data() {
        return {
            list: {},
            url: "",
            index: null,
            show: false,
            imageIndex: null,
            link: "",
            isSet: true,

        }
    },
    mounted() {
        this.list = this.data;
    },
    methods: {
        close() {
            this.show = false;
            this.url = "";
        },
        selpage(e) {
            this.list["link"] = e.ID
            this.list["linkName"] = e.name
            this.list["goodsType"] = e.goodsType
            this.show = false;
        },
        urlPopup(index) {
            this.show = true;
            this.index = index;
            this.list.link = this.list["link"];
        },
        removeImage(index) {
            this.list.data.splice(index, 1);
        },
        addImage(index) {
            this.isSet = true

            this.imageIndex = index;
            this.$refs["upload"].$children[0].$refs.input.click();
        },
        setImage(index) {
            this.imageIndex = index;
            this.$refs["upload"].$children[0].$refs.input.click();
            this.isSet = false
        },
        upload(params) {
            let that = this;
            const len = this.list.data.length;

            if (len >= this.len && this.isSet) {
                this.$message.error(`最多添加${this.len}张图片!`);
                return;
            }
            const file = params.file,
                fileType = file.type;

            const verifyList = [
                {
                    text: "只能上传图片格式png、jpg、gif!",
                    result: fileType.indexOf("image") != -1,
                },
                {
                    text: "只能上传大小小于5M",
                    result: file.size / 1024 / 1024 < 5,
                },
            ];

            for (let item of verifyList) {
                if (!item.result) {
                    this.$message.error(item.text);
                    return;
                }
            }
            let types = params.file.name.split(".")
            let key = new Date()
            key = that.$template + '/' + key.getTime() + "." + types[types.length - 1]
            const form = new FormData();
            form.append("file", file);
            form.append("clientType", "multipart/form-data");
            form.append("key", key);
            this.getToken().then(
                (res) => {
                    form.append("token", res.data.token);
                    that
                        .$http({
                            url: res.data.upload,
                            method: "post",
                            headers: {
                                "Content-Type": "multipart/form-data",
                                token: res.data.token,
                            },
                            data: form,
                            dataType: "json",
                            cache: false, //上传文件无需缓存
                            processData: false, //用于对data参数进行序列化处理 这里必须false
                            contentType: false, //必须
                        })
                        .then((ress) => {
                            const index = this.imageIndex;
                            const data = {
                                name: file.name,
                                url: res.data.url + key,
                                link: "",
                                form,
                            };
                            if (index !== null) {
                                that.$set(that.list.data, index, data);
                            } else {
                                that.list.data.push(data);
                            }
                        });
                },
                function () {
                    console.log("请求失败处理");
                }
            );
        },
    }
}
</script>

<style lang="scss" scoped>
.concent {
    padding: 10px;
}

.image-content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    overflow: hidden;

    .desc {
        text-align: center;
        font-size: 12px;
        color: #666;
        margin: 18px 0;
        padding-bottom: 10px;
        border-bottom: 1px dashed #ddd;
    }

    .size {
        text-align: center;
        font-size: 12px;
        color: #999;
        margin-bottom: 0;
    }

    .add-image {
        width: calc(100% - 20px);
        height: 34px;
        line-height: 34px;
        padding: 0;
        font-size: 12px;
        margin-left: 10px;
        margin-top: 10px;
    }

    .image-list {
        margin: 0;
        padding: 0 10px;
        overflow: auto;

        &::-webkit-scrollbar-thumb {
            background: #dbdbdb;
            border-radius: 10px;
        }

        &::-webkit-scrollbar-track {
            background: #f6f6f6;
            border-radius: 10px;
        }

        &::-webkit-scrollbar {
            width: 6px;
        }

        li {
            list-style: none;
            background: #f7f8f9;
            border-radius: 4px;
            padding: 6px 14px 10px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;

            &.disable div {
                pointer-events: none;
                user-select: none;
            }

            .l-info {
                font-size: 12px;
                padding-top: 8px;
                width: calc(100% - 70px);


                margin: 12px 0 0;
                white-space: nowrap;
                overflow: hidden;
                display: flex;

                .link {
                    color: #1b8bff;
                    cursor: pointer;
                }

                .text {
                    white-space: nowrap;
                    text-align: -webkit-auto;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    cursor: pointer;
                    color: #1b8bff;

                }
            }

            .r-image {
                text-align: right;

                .el-icon-close {
                    color: #999;
                    font-size: 12px;
                    font-weight: 600;
                    margin-bottom: 6px;
                    cursor: pointer;

                    &:hover {
                        color: red;
                    }
                }

                .image-box {
                    width: 70px;
                    height: 70px;
                    border-radius: 5px;
                    overflow: hidden;
                    position: relative;
                    background: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    &::before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.5);
                        opacity: 0;
                        transition: all 0.3s;
                    }

                    span {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        color: #fff;
                        transform: translate(-50%, -50%);
                        font-size: 20px;
                        cursor: pointer;
                        opacity: 0;
                        transition: all 0.3s;
                    }

                    img {
                        max-width: 100%;
                    }

                    &:hover {

                        &::before,
                        span {
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }
}

.text {
    white-space: nowrap;
    text-align: -webkit-auto;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    color: #1b8bff;

}
</style>